<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">


<style>

    .userList {
        width: 70%;
        background: #fff;
        float: left;
        margin-right: 20px;
        padding: 15px;
        box-sizing: border-box;
    }

    .titleA {
        background: #ccc;
        line-height: 40px;
        padding-left: 10px;
    }

    .caption, .problem, .rubr, .mark {
        margin-top: 10px;
        font-size: 14px;
        width: 100%;
        resize: none;
    }

    .rubr {
        height: 100px !important;
    }

    .fixedList {
        width: 300px;
        float: left;
        background: #fff;
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
    }

    .listBox {
        margin-top: 10px;
        display: table;
    }

    .listBox li {
        cursor: pointer;
        width: 25px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
        float: left;
    }

    .listBox li:hover {
        background: #0fccbc;
    }

    .numberPeople, .maxScore, .minScore {
        width: 150px;
        border-radius: 5px;
        margin-right: 20px;
        text-align: center;
        padding: 15px;
        box-sizing: border-box;
    }

    #numberPeople, #maxScore, #minScore {
        margin-top: 10px;
    }

    .ibox {
        margin-bottom: 20px;
        overflow: hidden;
    }

    .fixed-table-toolbar {
        margin-bottom: 10px;
    }

    .user {
        background: #FFF2F2;
        width: 230px;
    }

    .tallGrade {
        background: #EDF2FF;
        width: 230px;
    }

    .lowGrade {
        background: #E7F5F8;
        width: 230px;
    }

    .pull-left p {
        color: #5a5f72;
    }

    .bgcoor {
        background: #ffffff;
        padding-top: 20px;
    }

    .pull-left-img {
        width: 40px;
        height: 40px;
        background: #ffffff
    }
    .pull-left-img{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .pull-left .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 20px
    }

    #exampleTable {
        border-left: 0px;
        border-right: 0px
    }

    #exampleTable th {
        border-left: 0px;
        border-right: 0px
    }

    #exampleTable td {
        border-left: 0px;
        border-right: 0px
    }

    .table .thead-dark th {
        background-color: #f9fafe;
        border-color: #f1f4f5;
    }

    .bootstrap-table .fixed-table-container {
        height: 500px !important;
        font-size: 15px;
    }

    #exampleTable thead {
        position: sticky !important;
        top: -2px;
    }

    #exampleTable tbody {
        border: 1px solid #DFEAF1;
    }
</style>
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12 bgcoor">

        <div class="ibox">
            <div class="pull-left numberPeople user" style="display: flex">
                <div class="pull-left-img">
                    <img src="../../../img/zu1517.png" alt="竞赛总人数"></div>
                <div class="content">
                    <p>竞赛总人数</p>
                    <h2 id="numberPeople"></h2>
                </div>
            </div>
            <div class="pull-left maxScore tallGrade" style="display: flex">
                <div class="pull-left-img">
                    <img src="../../../img/zu1519.png" alt="最高分"></div>
                <div class="content">
                    <p>最高分</p>
                    <h2 id="maxScore"></h2>
                </div>
            </div>
            <div class="pull-left minScore lowGrade" style="display: flex">
                <div class="pull-left-img">
                    <img src="../../../img/zu1521.png" alt="最低分"></div>
                <div class="content">
                    <p>最低分</p>
                    <h2 id="minScore"></h2>
                </div>
            </div>
        </div>

        <div class="ibox">
            <div class="ibox-body">
                <div class="fixed-table-toolbar">
                    <div class="columns pull-left">
                        <button shiro:hasPermission="jzweb:examinationAnswerSheetComYiWai:import" type="button"
                                class="btn  btn-primary"
                                onclick="downExcelModelFile()">导出
                        </button>

                    </div>
                </div>
                <table id="exampleTable" data-mobile-responsive="true">
                </table>
            </div>
        </div>
    </div>
</div>
<!--shiro控制bootstraptable行内按钮看见性 -->
<div>
    <script type="text/javascript">
        var s_edit_h = 'hidden';
        var s_remove_h = 'hidden';
        var s_resetPwd_h = 'hidden';
        var rubrinfo = 'hidden';
    </script>
</div>

<div shiro:hasPermission="jzweb:examinationAnswerSheetComyuezi:rubrinfo">
    <script type="text/javascript">
        rubrinfo = '';
    </script>
</div>

<div shiro:hasPermission="jzweb:examinationAnswerSheetComyuezi:edit">
    <script type="text/javascript">
        s_edit_h = '';
    </script>
</div>

<div shiro:hasPermission="jzweb:examinationAnswerSheetComyuezi:remove">
    <script type="text/javascript">
        var s_remove_h = '';
    </script>
</div>
<div shiro:hasPermission="jzweb:examinationAnswerSheetComyuezi:resetPwd">
    <script type="text/javascript">
        var s_resetPwd_h = '';
    </script>
</div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript"
        src="/js/webJs/jzweb/examinationAnswerSheetComYiWai/examinationAnswerSheetComYiWai.js"></script>
</body>
</html>